<template>
	<view class="reply">
		<!-- 显示的输入框 -->
		<view class="reply-bar">
			<image class="reply-bar-avatar" :src="avatar"></image>
			<view class="reply-bar-input" @click="$emit('open')">{{placeholder}}</view>
		</view>
		<!-- 实际弹出的输入界面 -->
		<view class="reply-box" v-if="show" @click="handleClose">
			<view class="reply-box-panel" @click.stop="()=>{}">
				<view class="panel-input">
					<textarea
						ref="input"
						type="text"
						:placeholder="placeholder"
						adjust-position
						hold-keyboard
						confirm-hold
						confirm-type="done"
						:cursor-spacing="cursorSpacing"
						:focus="focus"
						auto-focus
						auto-height
						
						v-model="replyContent"
						@blur="focus=false"
					/>
					<view class="panel-input-imgs">
						<view class="imgs-item"  v-for="(item,index) in replyImgs" :key="index">
							<image :src="item" ></image>
							<text @click="handleCut(index)"></text>
						</view>
					</view>
					
				</view>
				<view class="panel-control">
					<view class="panel-control-img"  @click="handleUploadImg"></view>
					<text class="panel-control-submit active" v-if="replyContent" @click="handleSubmit">发表</text>
					<text class="panel-control-submit" v-else>发表</text>
				</view>
				<view class="panel-keyboard" v-if="!focus" :style="{ height: keyboardHeight+'px' }"></view>
			</view>
		</view>
	</view>
</template>

<script>
	let deviceWidth = wx.getSystemInfoSync().windowWidth; //获取设备屏幕宽度
	let unit = deviceWidth/750;//1单位rpx的px值
	export default {
		props:{
			avatar:{
				type:String,
				
			},
			placeholder:{
				type:String,
				default: '来发表你的看法吧'
			},
			show:Boolean
		},
		data(){
			return {
				focus:false,
				replyContent: "",
				replyImgs:[],
				keyboardHeight:0
			}
		},
		computed:{
			cursorSpacing(){
				let imgHeight = this.replyImgs.length?85:0
				return unit*(120 + imgHeight)
			}
		},
		beforeCreate() {
			uni.onKeyboardHeightChange(e=>{
				if(e.height){
					this.keyboardHeight = (this.keyboardHeight||e.height) - 50
				}
				
			})
		},
		methods:{
			handleOpen(){
				this.$emit('update:show', true)
				this.focus = true;
			},
			handleClose(){
				this.$emit('update:show', false)
				this.focus = false;
			},
			handleCut(index){
				this.replyImgs.splice(index,1);
			},
			
			handleUploadImg(){
				// this.$refs.imgs.chooseImage()
				uni.chooseImage({
					count: 3,
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有  
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有  
					success: (res)=> {
						this.replyImgs = this.replyImgs.concat(res.tempFilePaths).slice(0,3)
						this.focus = true;
					},
					fail:()=>{
						this.focus = true;
					}
				})
			},
			handleSubmit(){
				this.$emit('update:show', false);
				let data = {
					content: this.replyContent,
					imgs: [...this.replyImgs]
				}
				
				this.replyContent = ''
				this.replyImgs = []
				this.$emit('submit',data);
				
			}
		}
	}
</script>

<style lang='scss' scoped>
	.reply{
		.reply-bar{
			height: 100rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			.reply-bar-input{
				flex: 1;
				height: 70rpx;
				border-radius: 35rpx;
				background-color: #F4F6F5;
				display: flex;
				align-items: center;
				padding:0 30rpx;
				font-size: 30rpx;
				color: #777;
			}
			.reply-bar-avatar{
				margin-right: 20rpx;
				flex-shrink: 0;
				width:70rpx;
				height: 70rpx;
				border-radius: 35rpx;
				background-color:#F4F6F5;
			}
		}
		
		.reply-box{
			position: fixed;
			z-index: 1000;
			top:0;
			left:0;
			width:100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.3);
			display: flex;
			align-items: flex-end;
			.panel-input{
				border-radius: 35rpx;
				background-color: #F4F6F5;
				padding:15rpx 30rpx;
				textarea{
					width:100%;
					font-size: 30rpx;
					height: 40rpx;
				}
				.panel-input-imgs{
					.imgs-item{
						display: inline-flex;
						position: relative;
						width:100rpx;
						height: 70rpx;
						margin-top:15rpx;
						&+.imgs-item{
							margin-left: 30rpx;
						}
						image{
							width:100%;
							height: 100%;
							border-radius: 10rpx;
						}
						text{
							display: flex;
							border-radius: 15rpx;
							align-items: center;
							justify-content: center;
							height: 30rpx;
							width: 30rpx;
							line-height: 30rpx;
							position: absolute;
							font-weight: bold;
							top:0rpx;
							right:-10rpx;
							color: #fff;
							font-size: 40rpx;
							background-color: #777;
							&::after{
								content:"";
								display: block;
								height: 5rpx;
								width:20rpx;
								background-color: #fff;
								border-radius: 3rpx;
							}
						}
					}
				}
			}
			.reply-box-panel{
				width:100%;
				background-color: #fff;
				padding:15rpx 30rpx;
				border-radius: 15rpx 15rpx 0 0;
				.panel-control{
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-top:30rpx;
					.panel-control-img{
						width:60rpx;
						height: 50rpx;
						background: url("") center/cover no-repeat;
					}
					.panel-control-submit{
						display: flex;
						width:150rpx;
						height: 60rpx;
						align-items: center;
						justify-content: center;
						color: #fff;
						font-size: 30rpx;
						border-radius: 30rpx;
						background-color: #aaa;
						&.active{
							background-color: #449FFE;
						}
					}
				}
				.panel-keyboard{
					background-color: #fff;
					display: block;
				}
			}
		}
	}
</style>